<template>
  <div class="order_content">
    <div class="order_header">
      <div class="operation_left">
        <el-button size="mini"  @click="deleteProList" v-if="jurisdiction.order_delete"
                   type="primary" plain>删除
        </el-button>
        <el-select v-model="status" placeholder="订单状态" style="width: 100px;margin-left: 15px;margin-right:10px"
                   size="mini">
          <el-option
            v-for="item in statusOptions"
            :key="item.id"
            :label="item.dictKey"
            :value="item.id">
          </el-option>
        </el-select>
        <el-date-picker
          size="mini"
          v-model="date"
          style="width: 270px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>

      <div class="operation_right">
        <div class="search" style="display: inline-block">
          <el-input v-model="searchVal" placeholder="请输入订单号/订单名称/客户名称。。。" style="width:220px;margin: 0 10px" size="mini"
                    @keyup.enter.native="search">
            <el-button slot="append" style="cursor: pointer;" @click="search">
              <i class="el-icon-search"></i>
            </el-button>

          </el-input>
        </div>
        <el-button size="mini" @click="reset">重置</el-button>

        <el-button size="mini" @click="addOrder" v-if="jurisdiction.order_add" type="primary" plain>+新建订单</el-button>
        <!--   新建订单组件     -->
        <editOrder :visible="orderVisible" :title="orderTitle" @closeOrder="closeEditOrder" :order="orderId"
                   v-if="orderShow"></editOrder>
      </div>
    </div>


    <el-table
      class="table_box"
      :data="tableData"
      ref="refTable"
      @selection-change="changeProduct"
      @row-click="openTable"
      :height="tableHeight">
      <el-table-column
        type="selection"
        width="45">
      </el-table-column>
      <el-table-column type="expand">
        <template slot-scope="props">
          <div v-if="props.row.productListDtos != undefined && props.row.productListDtos.length > 0">
            <el-table :data="props.row.productListDtos" :show-header="false">
              <el-table-column width="93px">
              </el-table-column>
              <el-table-column label="产品" width="280px">
                <template slot-scope="scope">
                  <div style="display: flex;align-items: center;">
                    <viewer><img :src="scope.row.defaultPicUrl" class="product_img"/></viewer>
                    <span class="more" style="margin-left: 8px">{{scope.row.productName}}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="单价" prop="unitPrice">
                <template slot-scope="scope">
                  {{scope.row.unitPrice}}
                </template>
              </el-table-column>
              <el-table-column label="数量" prop="prductCount">
              </el-table-column>
              <el-table-column label="客户名称">
                <template slot-scope="scope">
                  {{props.row.custName}}
                </template>
              </el-table-column>
              <el-table-column label="下单时间" prop="createTime" width="160px">
                <template slot-scope="scope">
                  {{props.row.createTime}}
                </template>
              </el-table-column>
              <el-table-column label="订单状态" prop="orderStatusName">
                <template slot-scope="scope">
                  {{props.row.orderStatusName}}
                </template>
              </el-table-column>
              <el-table-column label="操作">
              <template slot-scope="scope">
                {{props.row.currencyEname}} {{scope.row.amount}}
              </template>
              </el-table-column>
              <el-table-column label="操作"  width="120px">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <span>
                      <i class="icon-delete_icon" style="cursor: pointer" @click="brforDelete(scope.row.id,props.row.id)"
                         v-if="jurisdiction.order_move"></i>
                    </span>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-else style="text-align: center">
            暂无产品
          </div>

        </template>
      </el-table-column>
      <el-table-column
        width="280px"
        label="产品">
        <template slot-scope="scope">
          <p>
            <span class="label">订单号：</span>
            <span>{{scope.row.orderNo}}</span>
          </p>
          <p>
            <span class="label">订单名称：</span>
            <span class="order_text" @click="toDetail(scope.row)">{{scope.row.orderName}}</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column
        label="单价">
      </el-table-column>
      <el-table-column
        prop="totalSize"
        label="数量">
      </el-table-column>
      <el-table-column
        prop="custName"
        label="客户名称">
      </el-table-column>
      <el-table-column
        prop="createTime"
        width="160px"
        label="下单时间">
      </el-table-column>
      <el-table-column
        prop="orderStatusName"
        label="订单状态">
      </el-table-column>
      <el-table-column
        prop="orderAmount"
        label="订单金额">
        <template slot-scope="scope">
          <span>{{scope.row.currencyEname}}   {{scope.row.orderAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="120px">
        <template slot-scope="scope">

          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <span>
              <i class="icon-bianji operation_icon" @click.stop="editOrder(scope.row.id)"
                 v-if="jurisdiction.order_edit"></i>
            </span>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <span>
              <i class="icon-delete_icon operation_icon" @click.stop="removeOrder(scope.row)"
                 v-if="jurisdiction.order_delete"></i>
            </span>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="导出" placement="top">
            <span>
              <i class="icon-unie123 operation_icon" @click.stop="exportOrder(scope.row.id)"
                 v-if="jurisdiction.order_export"></i>
            </span>
          </el-tooltip>

        </template>
      </el-table-column>

      <div slot="empty">
        <div>
          <img :src="empty" alt="" style="width: 250px"/>
        </div>
      </div>

    </el-table>

    <!--  删除订单  -->
    <el-dialog
      :visible.sync="deletetDialog"
      width="450px" :close-on-click-modal="false" :close-on-press-escape	='false'
      append-to-body
      center
      style="font-size: 13px"
      :before-close="closeDelete">
      <span slot="title" class="dialog-title">删除订单提醒</span>
      <p v-if="checkProduct != undefined && checkProduct.length > 3" style="text-align: center">
        确定将{{checkProduct[0].orderName}},{{ checkProduct[1].orderName}},{{checkProduct[2].orderName}}...永久删除吗？
      </p>
      <p v-else style="text-align: center">确定将
        <span v-for="(item,index) in checkProduct" :key="index"> <span
          v-if="index != 0">,</span> {{item.orderName}}</span>
        永久删除吗？
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDelete" size="small">取 消</el-button>
        <el-button type="primary" @click="deletePro" size="small">确 定</el-button>
      </span>
    </el-dialog>

    <!--  删除订单下产品  -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape	='false'
      :visible.sync="productDialog"
      width="30%"
      append-to-body
      center
      style="font-size: 13px">
      <span slot="title" class="dialog-title">删除产品提醒</span>
      <p style="text-align: center">确定将所选中的产品删除吗？</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="productDialog = false" size="small">取 消</el-button>
        <el-button type="primary" @click="removeProduct" size="small">确 定</el-button>
      </span>
    </el-dialog>

    <exportDialog :visible="dialogVisible" @close="closeDia" :excelId="excelId" v-if="exportDialog"></exportDialog>


    <div class="order_footer" v-if="pageTotal > 0">
      <el-pagination
        align="right" class="fixed"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="nowPage"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size.sync="nowSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal">
      </el-pagination>
    </div>

  </div>
</template>
<script>
    import {orderList, queryOrderStatus, deleteOrder, deleteProduct} from '@/api/order'
    import editOrder from '@/components/order/editOrder'
    import exportDialog from '@/components/order/export'
    import {mapGetters} from "vuex";

    export default {
        components: {
            editOrder,
            exportDialog
        },
        data() {
            return {
                empty: './img/empty.png',

                cnPic: './img/cn_abbreviation.png',
                enPic: './img/en_abbreviation.png',
                jurisdiction: {}, // 权限集合
                tableData: [],
                isActionBar: false,
                status: '', // 订单状态
                statusOptions: [], // 订单状态数组
                searchVal: '', // 搜索框
                pageTotal: 0, // 所有订单数
                date: [], // 订单创建时间
                nowPage: 1, // 当前页
                nowSize: 10, // 当前所有显示条数
                orderVisible: false, // 订单组件的显隐
                userid: '',
                orderTitle: '', //订单组件title
                exportDialog: false, // 订单导出弹框
                deletetDialog: false, // 删除订单弹框
                checkProduct: [], // 订单名称
                orderId: '', // 编辑订单用到的id
                orderShow: false, // 订单组件
                excelId: '',
                productDialog: false,
                productId: '',
                id: '',
                screenHeight: document.documentElement.clientHeight,
                tableHeight: document.documentElement.clientHeight - 190,
                dialogVisible: false
            }
        },
        created() {
            this.jurisdiction = this.vaildData(this.permission)
            this.userid = this.$route.params.id ? this.$route.params.id : ''
            queryOrderStatus().then(res => {
                this.statusOptions = res.data.data
            })
            this.init()
        },
        mounted() {
            window.onresize = () => {
                this.$nextTick(() => {
                    this.screenHeight = document.documentElement.clientHeight
                    this.tableHeight = this.screenHeight - 190
                })
            }
        },
        computed: {
            ...mapGetters(["permission"]),
        },
        methods: {
            init() {
                orderList(this.userid, this.nowPage, this.nowSize, this.searchVal, this.status, this.date).then(res => {
                    this.tableData = res.data.data.records
                    this.pageTotal = res.data.data.total
                })
            },
            closeDia() {
                this.exportDialog = false
                this.dialogVisible = false
            },
            search() {
                this.nowPage = 1
                this.init()
            },
            closeEditOrder(value) { // 关闭编辑
                this.orderVisible = false
                this.orderShow = false
                if (value) {
                    this.init()
                    this.bus.$emit('updataOrderMenu')
                }
            },
            addOrder() { // 添加订单
                this.orderTitle = '新建订单'
                this.orderShow = true
                this.orderId = ''
                this.orderVisible = true
            },
            handleSizeChange(size) { // 显示条数改变
                this.nowSize = size
                this.init()
            },
            handleCurrentChange(page) { // 当前页改变
                this.nowPage = page
                this.init()
            },
            changeProduct(selection) { // 订单选中项发生变化
                this.checkProduct = selection
            },
            editOrder(id) { // 编辑订单
                this.orderTitle = '编辑订单'
                this.orderShow = true
                this.orderId = id
                this.orderVisible = true
            },
            removeOrder(item) { // 删除订单
                this.checkProduct = [item]
                this.deletetDialog = true
            },
            deleteProList() { // 全选删除
                if (this.checkProduct.length == 0) {
                    this.$message({
                        message: '请选择要删除的订单',
                        type: "success"
                    });
                } else {
                    this.deletetDialog = true
                }
            },
            toDetail(row) {
                this.$router.push(`/order/detail/${row.id}`)
            },
            deletePro() { // 点击删除按钮
                var deleteArr = []
                this.checkProduct.forEach(value => {
                    deleteArr.push(value.id)
                })

                deleteOrder(deleteArr.join(',')).then(res => {
                    if (res.data.success) {
                        this.$message({
                            type: 'success',
                            message: res.data.msg
                        })
                        this.deletetDialog = false

                        if (deleteArr.length == this.tableData.length) {
                            this.nowPage = this.nowPage - 1
                            this.init()
                        } else {
                            this.init()
                        }
                        this.bus.$emit('updataOrderMenu')
                    }
                })
            },
            closeDelete() { // 删除订单关闭
                this.deletetDialog = false
            },
            brforDelete(productId, id) {
                this.productId = productId
                this.id = id
                this.productDialog = true
            },
            removeProduct() {
                deleteProduct(this.productId, this.id).then(res => {
                    if (res.data.success) {
                        this.init()
                        this.$message({
                            type:'success',
                            message:res.data.msg
                        })
                        this.productDialog = false
                    }
                })
            },
            reset() {
                this.status = ''
                this.date = ''
                this.searchVal = ''
                this.nowPage = 1
                this.nowSize = 10
                this.init()
            },
            exportOrder(id) {
                this.excelId = id
                this.exportDialog = true
                this.dialogVisible = true
            },
            openTable(row) {
                this.$refs.refTable.toggleRowExpansion(row)
            }
        },
        watch: {
            status() {
                this.nowPage = 1
                this.init()
            },
            date(value) {
                this.nowPage = 1
                if(value) {
                    this.init()
                } else {
                    this.date = ''
                    this.init()
                }
            },
            '$route': function (to) {
                //执行数据更新查询
                this.status = ''
                this.date = ''
                this.searchVal = ''
                this.nowPage = 1
                this.nowSize = 10
                orderList(to.params.id, this.nowPage, this.nowSize, this.searchVal, this.status, this.date).then(res => {
                    this.tableData = res.data.data.records
                    this.pageTotal = res.data.data.total
                })

            }
        }
    }
</script>
<style lang="scss">
  .table_box {
    .el-table__expanded-cell {
      padding: 20px 0;
    }
  }
</style>


<style lang="scss" scoped>
  .label {
    display: inline-block;
    width: 70px;
  }

  .table_cell {
    display: inline-block;
  }

  .order_content {
    background-color: white;
    box-sizing: border-box;
    font-size: 13px;
  }

  .order_header {
    margin-bottom: 10px;
    overflow: hidden;
  }

  .operation_left {
    float: left;
    font-size: 13px;
  }

  .operation_right {
    float: right;
    display: flex;
  }

  .action_bar {
    padding-bottom: 5px;
  }

  .input_width {
    width: 190px;
  }

  .action_lable {
    width: 92px;
    display: inline-block;
  }

  .bg-purple {
    margin: 5px 0;
  }

  .order_footer {
    margin-top: 5px;
  }

  .product_img {
    width: 50px;
    vertical-align: middle;
  }

  .product_item {
    display: inline-block;
    padding: 10px;
    box-sizing: border-box;
  }

  .operation_icon {
    margin: 0 5px;
    cursor: pointer;
  }

  .export_item {
    background-color: #f5f5f5;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
  }

  .export_box {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .template_text {
    margin: 0 5px;
    color: #2A97F9;
    text-decoration: underline;
    cursor: pointer;
  }

  .order_text {
    color: #2A97F9;
    cursor: pointer;
  }
</style>


